<template>
	<view class="view_box">
		<div class="logo_box">
			<img class="logo_img" src="https://fes.qyerstatic.com/fe_ssr_passport/41bd0a522fbeb024a41208a408ca73ec.png"
				alt="">
			<span class="title">{{titleLogo}}</span>
		</div>
		<div class="out_box">
			<div class="login_box" v-if="isLogin">
				<TabMenu :titleList="titleList" @tab-change="tabChange"></TabMenu>
				<div class="login_info_box">
					<div class="login_tip">
						关于穷游网将实行<span style="color: #28b76c;">手机绑定实名制的说明</span>
					</div>
					<div class="input_box account_box">
						<input @blur="checkData('account')" v-model="loginData.account.value" type="text" class="input"
							placeholder="手机号">
						<div class="err_tip" v-if="!loginData.account.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{loginData.account.tipInfo}}</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<div class="input_box password_box" v-if="tabIndex == 0">
						<input @blur="checkData('password')" v-model="loginData.password.value" type="password"
							class="input" placeholder="密码">
						<div class="err_tip" v-if="!loginData.password.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{loginData.password.tipInfo}}</span>
							<span class="info">忘记密码</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<div class="input_box meg_code_box" v-if="tabIndex == 1">
						<input @blur="checkData('msgCode')" v-model="loginData.msgCode.value" type="text" class="input"
							placeholder="验证码">
						<button class="get_msg_code" @click="getMsgCode(1)">获取验证码</button>
						<div class="err_tip" v-if="!loginData.msgCode.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{loginData.msgCode.tipInfo}}</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<button class="login_but" @click="toLogin()">
						登录
					</button>
					<div class="login_auth_box">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
					</div>
					<div class="bottom_tip register_bottom">
						<span>没有穷游帐号？</span>
						<span style="color: #28b76c;" @click="changeLogin('注册')">立即注册</span>
						<span class="info">境外手机号登录</span>
					</div>
				</div>
			</div>
			<div class="register_box" v-if="!isLogin">
				<div class="login_info_box">
					<div class="input_box account_box">
						<input type="text" @blur="checkData('phoneNum')" v-model="registerData.phoneNum.value"
							class="input" placeholder="手机号">
						<div class="err_tip" v-if="!registerData.phoneNum.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{registerData.phoneNum.tipInfo}}</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<div class="input_box password_box">
						<input type="text" @blur="checkData('password')" v-model="registerData.password.value"
							class="input" placeholder="密码">
						<div class="err_tip" v-if="!registerData.password.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{registerData.password.tipInfo}}</span>
							<span class="info">忘记密码</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<div class="input_box meg_code_box">
						<input type="text" @blur="checkData('msgCode')" v-model="registerData.msgCode.value"
							class="input" placeholder="验证码">
						<button class="get_msg_code" @click="getMsgCode(2)">获取验证码</button>
						<div class="err_tip" v-if="!registerData.msgCode.checkSuccess">
							<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj" alt="">
							<span class="err_info">{{registerData.msgCode.tipInfo}}</span>
						</div>
						<div class="err_tip" v-else></div>
					</div>
					<button class="login_but" @click="toRegister()">
						注册
					</button>
					<div class="login_auth_box">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FkHhVOT0BMK6LN3mOQ1qACNwKzlI" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FugnPbgTJd9eGwDRpbL4L-bEsZaZ" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FiMZfg-o4O6kGlKgQNBUEbLPY-0A" alt="">
						<img class="auth_icon" src="https://fes.qyerstatic.com/FtOA3elXgqZZY7Oa16ZRZt8Jsvnn" alt="">
					</div>
					<div class="bottom_tip register_bottom">
						<span>已有穷游帐号？</span>
						<span style="color: #28b76c;" @click="changeLogin('登录')">登录</span>
						<span class="info">同意<span style="color: #28b76c;">会员条款</span>和<span
								style="color: #28b76c;">免责声明</span>
						</span>
					</div>
				</div>
			</div>
			<div class="bg_box" v-if="isLogin">

			</div>
		</div>
	</view>
</template>

<script>
	import TabMenu from "@/components/TabMenu"
	import constants from "@/common/constants"
	import loginApi from "@/api/loginApi"
	import catchUtil from "@/utils/catchUtil"
	// import router from "@/router/index"
	// import axios from "axios";
	export default {
		components: {
			TabMenu
		},
		data() {
			return {
				titleList: ['账号登录', '短信快捷登录'],
				titleLogo: '登录',
				tabIndex: 0,
				isLogin: true,
				validateConfig: constants.VALIDATE_CONFIG,
				loginData: {
					account: {
						value: '15082456546',
						tipInfo: '',
						checkSuccess: true,
						tabIndex: [0, 1]
					},
					password: {
						value: '',
						tipInfo: '',
						checkSuccess: true,
						tabIndex: [0]
					},
					msgCode: {
						value: '',
						tipInfo: '',
						checkSuccess: true,
						tabIndex: [1]
					}
				},
				registerData: {
					phoneNum: {
						value: '15082456546',
						tipInfo: '',
						checkSuccess: true
					},
					password: {
						value: '',
						tipInfo: '',
						checkSuccess: true
					},
					msgCode: {
						value: '',
						tipInfo: '',
						checkSuccess: true
					}
				}
			}
		},
		methods: {
			changeLogin(val) {
				this.isLogin = !this.isLogin;
				this.titleLogo = val;
			},
			tabChange(index) {
				this.tabIndex = index
			},
			//效验
			checkData(key) {
				const validateInfo = this.validateConfig[key];
				if (this.isLogin) {
					if (validateInfo.regExp.test(this.loginData[key].value)) {
						this.loginData[key].checkSuccess = true
						return true
					} else {
						this.loginData[key].checkSuccess = false
						this.loginData[key].tipInfo = validateInfo.tipInfo
						return false
					}
				} else {
					if (validateInfo.regExp.test(this.registerData[key].value)) {
						this.registerData[key].checkSuccess = true
						return true
					} else {
						this.registerData[key].checkSuccess = false
						this.registerData[key].tipInfo = validateInfo.tipInfo
						return false
					}
				}
			},
			toLogin() {
				// if (this.checkAllData()) {
				this.tabIndex == 0 ? this.accountLogin() : this.phoneNumLogin()
				// this.$router.replace('/')
				
				// }
			},
			accountLogin() {
				const param = {
					"account": this.loginData.account.value,
					"password": this.loginData.password.value,
				}
				loginApi.accountLogin(param).then(res => {
					catchUtil.setLocalStorage('userInfo', res.data)
					this.$router.replace('/')
				}).catch(err => {
					console.log(err)
				})
			},
			phoneNumLogin() {
				const param = {
					"msgCode": this.loginData.msgCode.value,
					"phoneNum": this.loginData.account.value,
				}
				loginApi.phoneNumLogin(param).then(res => {
					catchUtil.setLocalStorage('userInfo', res.data)
					this.$router.replace('/')
				}).catch(err => {
					console.log(err)
				})
			},
			toRegister() {
				if (this.checkAllData()) {
					loginApi.register({
						"msgCode": this.registerData.msgCode.value,
						"password": this.registerData.password.value,
						"phoneNum": this.registerData.phoneNum.value
					}).then(res => {
						if (res.code == 1) {
							this.isLogin = true;
							this.loginData.account.value = this.registerData.phoneNum.value
						}
					})
				}
			},
			checkAllData() {
				let result = true
				if (this.isLogin) {
					for (let key in this.loginData) {
						if (this.loginData[key].tabIndex.includes(this.tabIndex) && !this.checkData(key)) {
							result = false
							return
						}
					}
				} else {
					for (let key in this.registerData) {
						if (!this.checkData(key)) {
							result = false
							return
						}
					}
				}
				return result
			},
			//获取验证码
			getMsgCode(type) {
				const checkRes = type == 1 ? this.checkData('account') : this.checkData('phoneNum')
				if (checkRes) {
					loginApi.getMsgCode({
						phoneNumber: type == 1 ? this.loginData.account.value : this.registerData.phoneNum.value,
						type: type
					}).then(res => {
						if (res.code == 1) {
							type == 1 ? this.loginData.msgCode.value = res.data : this.registerData.msgCode.value =
								res
								.data;
						}
					}).catch(err => {
						console.log(err)
					})
				}
			}
		},
		mounted() {
			// axios.get('http://192.168.0.14:8080/user/getMsgCode?phoneNumber=15082214943&type=2').then(response => {
			// 	console.log(response)
			// })
		}
	}
</script>

<style lang="scss">
	@import url('../../public/public.scss');

	.view_box {
		height: 100%;
		background-image: url(https://fes.qyerstatic.com/fe_ssr_passport/ecb39528d488b6c520f7ddd3898379d6.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo_box {
		.logo_img {
			width: 126.5px;
			height: 46px;
		}

		.title {
			font-size: 24px;
			color: #fff;
			text-shadow: 0 0 4px rgba(0, 0, 0, .3);
			line-height: 46px;
			vertical-align: bottom;
		}
	}

	.out_box {
		display: flex;
		align-items: center;

		.login_box,
		.register_box {
			width: 380px;
			box-sizing: border-box;
			padding: 24px 24px;
			background-color: #FFFFFF;



			.login_info_box {
				width: 100%;

				.login_tip {
					width: 100%;
					font-size: 14px;
					line-height: 60px;
					height: 50px;
					color: #959595;
				}

				.input_box {
					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 100%;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}

					.err_tip {
						min-width: 30px;
						height: 30px;
						line-height: 30px;
						color: #ff654c;
						font-size: 12px;
						display: flex;
						align-items: center;
						// visibility: hidden;

						.err_icon {
							flex-shrink: 0;
							width: 12px;
							height: 12px;
							margin-bottom: -2px;
							margin-right: 4px;
						}

						.err_info {
							flex-shrink: 0;
						}

						.info {
							width: 100%;
							text-align: end;
							color: #959595;
							cursor: pointer;
						}
					}
				}

				.meg_code_box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.input {
						box-sizing: border-box;
						padding: 3px 7px;
						border: 1px solid #d7d7d7;
						width: 200px;
						height: 40px;
						line-height: 40px;
						font-size: 14px;
						vertical-align: top;
						background: #fff;
						outline: none;
					}

					.get_msg_code {
						display: inline-block;
						box-sizing: border-box;
						border: 0;
						padding: 0 15px;
						width: 125px;
						height: 40px;
						line-height: 36px;
						border-radius: 3px;
						font-size: 14px;
						color: #fff;
						cursor: pointer;
						vertical-align: top;
						background-color: #3f9f5f;
					}
				}

				.login_but {
					display: inline-block;
					box-sizing: border-box;
					border: 0;
					padding: 0 15px;
					width: 100%;
					height: 36px;
					line-height: 36px;
					border-radius: 3px;
					font-size: 16px;
					color: #fff;
					cursor: pointer;
					vertical-align: top;
					background-color: #3f9f5f;
				}

				.login_auth_box {
					width: 100%;
					box-sizing: border-box;
					padding: 40px 12px 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.auth_icon {
						width: 40px;
						height: 40px;
					}
				}

				.bottom_tip {
					width: 100%;
					padding: 10px 0;
					height: 20px;
					line-height: 20px;
					color: #959595;
					font-size: 14px;
					display: flex;
					align-items: center;
					box-sizing: border-box;

					.info {
						width: 100%;
						text-align: end;
						flex-shrink: 1;
					}
				}

				.bottom_tip span {
					flex-shrink: 0;
				}
			}
		}

		.bg_box {
			width: 275px;
			height: 100%;
			background-repeat: no-repeat;
			background-image: url('https://fes.qyerstatic.com/FoLbAXJtwbB5SVORRmihPFWD-oYM');
			background-color: #f5f5f5;
			background-position: 50%;
			background-size: auto 100%;
		}
	}
</style>